<template>
	<w-container class='pb-16 container' :loading="isLoading">
		<w-navbar :placeholder="true" navType="goods" title='合成中心' :bgColor="bgColor" :opacity="opacity"
			:leftIconSize="32" :leftIcon="opacity>0.8?'arrow-left-back':'arrow-left-back'"
			:titleStyle="{color:opacity>0.8?'#222':'#fff'}">
			<view slot="right" class="right" @click="$u.route('/pages/compound/record')">
				<text class="text" :style="{color:opacity>0.8?'#222':'#fff'}">合成记录</text>
			</view>
		</w-navbar>
		<!-- <w-navbar leftIcon="back-btn" :titleStyle="{color:'#222'}" :title="info.name" navType="compound" @click="$u.route('/pages/compound/record')" :bgColor="bgColor"></w-navbar> -->
		<!-- 主图 -->
		<!-- <mainImg :src="info.image"></mainImg> -->
		<!-- <u-gap height="20"></u-gap> -->
		<!-- 合成方式 -->
		<methods :list="info.play"></methods>  
		<!-- <u-gap height="10000"></u-gap> -->
	<!-- 	<view @click="toRule" class="rule_btn">
			<w-image src="/static/bg/xggg.png" mode="widthFix"></w-image>
		</view> -->
	</w-container>
</template>

<script>
	import {
		themeinfo
	} from '@/api/compound/index.js';
	import mainImg from './components/mainImg.vue';
	import methods from './components/methods.vue';
	import opacityMixin from '@/mixins/opacityNav.js'
	export default {
		data() {
			return {
				thm: 0,
				isLoading: true,
				info: {
					image: '',
					play: [],
					name: '合成活动主题'
				},
				// bgColor:"transparent",
				product:{
					name:'合成记录'
				}
			};
		},
		components: {
			methods,
			mainImg
		},
		mixins: [opacityMixin],
		onLoad({
			thm
		}) {
			thm && (this.thm = thm);
		},
		onShow() {
			this.getDetails()
		},
		methods: {
			// 获取合成详情
			getDetails() {

				themeinfo({
					thm: this.thm
				}).then(res => {
					this.isLoading = false
					this.info = res.data
					uni.setStorageSync('compound_rule_text', res.data.rule_text)
				}).catch((res) => {
					if (res.code == 0) {
						setTimeout(() => {
							this.backPage();
						}, 1500)
					}
				})
			},
			toRule() {
				uni.$u.route('/pages/rules/rules', {
					type: 2
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		// background-color: #222222;
		background-image: url($IMG_URL + "/static/bg/compound-bg.png");
		background-size: 750rpx 100%;
		background-repeat: no-repeat;
		// padding-top: 32rpx;
		>.rule_btn {
			width: 154rpx;
			height: 70rpx;
			// background-color: #fff;
			// border-top: 2rpx solid $text-primary;
			// border-bottom: 2rpx solid $text-primary;
			// border-left: 2rpx solid $text-primary;
			// border-radius: 50rpx 0 0 50rpx;
			// @extend .flex-center,.font-size-14,.font-color-black;
			position: absolute;
			right: 16px;

			/* #ifdef H5 */
			top: 202rpx;
			/* #endif */
			/* #ifdef APP */
			top: calc(202rpx + var(--status-bar-height));

			/* #endif */
			z-index: 9;
		}
	}
</style>